<template>
  <div class="inner">
    <h1>机 构 注 册</h1>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="0"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-form-item label="" prop="nickName">
        <el-input v-model="ruleForm.nickName" placeholder="请输入用户昵称" />
      </el-form-item>
      <el-form-item label="" prop="phoneNumber">
        <el-input
          v-model="ruleForm.phoneNumber"
          placeholder="请输入联系手机号"
        />
      </el-form-item>
      <el-form-item label="" prop="messageCode">
        <el-input
          v-model="ruleForm.messageCode"
          placeholder="请输入短信验证码"
        />
      </el-form-item>
      <el-form-item label="" prop="password">
        <el-input
          v-model="ruleForm.password"
          placeholder="设置6至20位登录密码"
          type="password"
          show-password
        />
      </el-form-item>
      <el-form-item label="" prop="checkPassword">
        <el-input
          v-model="ruleForm.checkPassword"
          placeholder="请再次输入登录密码"
          type="password"
          show-password
        />
      </el-form-item>
      <el-form-item label="" prop="useFunction">
        <el-select
          v-model="ruleForm.useFunction"
          multiple
          placeholder="请选择使用功能"
          size="large"
          style="width: 100%"
        >
          <el-option
            v-for="item in useFunctionOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            ><span style="margin-left: 0.1rem; line-height: 0.18rem">{{
              item.label
            }}</span></el-option
          >
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="officialInstitutionName">
        <el-input
          v-model="ruleForm.officialInstitutionName"
          placeholder="请输入官方机构名称"
        />
      </el-form-item>
      <el-form-item label="" prop="landlinePhone">
        <el-input
          v-model="ruleForm.landlinePhone"
          placeholder="请输入联系电话(座机号)"
        />
      </el-form-item>
      <el-form-item label="" prop="certificate">
        <span style="margin-right: 0.1rem">专业证书</span>
        <el-upload
          v-model:file-list="fileList"
          class="upload-demo"
          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
          multiple
          :show-file-list="true"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          :limit="3"
          :on-exceed="handleExceed"
        >
          <el-button type="primary">请上传资格证书</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          style="width: 70%; margin-left: 15%"
          size="default"
          @click="submitForm(ruleFormRef)"
          :disabled="!radio"
        >
          注册
        </el-button>
        <!-- <el-button @click="resetForm(ruleFormRef)">Reset</el-button> -->
      </el-form-item>
    </el-form>
    <div class="checkBox">
      <el-radio-group v-model="radio">
        <el-radio
          :label="true"
          @click.prevent="radioChange()"
          class="mr-5"
          style="height: 50px"
          size="large"
          ><span>勾选同意</span><span>《用户服务协议》</span></el-radio
        >
      </el-radio-group>
      <p>
        <span @click="userPage">用户注册</span><span> | </span
        ><span @click="expertPage">专家注册</span>
      </p>
    </div>
    <otherwise></otherwise>
    <div class="redTriangle"><h2 @click="loginPage">登 录</h2></div>
    <div class="whiteTriangle"></div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, defineEmits, shallowRef } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import otherwise from "@/views/components/otherwise.vue";
import checkValidator from "@/views/data/checkValidator";
import userRegister from "@/views/register/components/userRegister.vue";
import expertRegister from "@/views/register/components/expertRegister.vue";
import type { UploadProps, UploadUserFile } from "element-plus";
import { ElMessage, ElMessageBox } from "element-plus";

const { checkMobilePhone, checkLandlinePhone } = checkValidator();

const emit = defineEmits(["changeShowLogin", "changeShowRegisterPage"]);

const fileList = ref<UploadUserFile[]>([
  // {
  //   name: "element-plus-logo.svg",
  //   url: "https://element-plus.org/images/element-plus-logo.svg",
  // },
]);

const handleRemove: UploadProps["onRemove"] = (file, uploadFiles) => {
  console.log(file, uploadFiles);
};

const handlePreview: UploadProps["onPreview"] = (uploadFile) => {
  console.log(uploadFile);
};

const handleExceed: UploadProps["onExceed"] = (files, uploadFiles) => {
  ElMessage.warning(
    `The limit is 3, you selected ${files.length} files this time, add up to ${
      files.length + uploadFiles.length
    } totally`
  );
};

const beforeRemove: UploadProps["beforeRemove"] = (uploadFile, uploadFiles) => {
  return ElMessageBox.confirm(
    `Cancel the transfer of ${uploadFile.name} ?`
  ).then(
    () => true,
    () => false
  );
};

let radio = ref(false);

interface RuleForm {
  nickName: string;
  phoneNumber: string;
  messageCode: string;
  checkPassword: string;
  password: string;
  useFunction: Array<string>;
  officialInstitutionName: string;
  landlinePhone: string;
}

const formSize = ref("large");
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  nickName: "",
  phoneNumber: "",
  messageCode: "",
  checkPassword: "",
  password: "",
  useFunction: [],
  officialInstitutionName: "",
  landlinePhone: "",
});

/**
 * 使用功能
 */
const useFunctionOptions = [
  {
    value: "1",
    label: "大赛",
  },
  // {
  //   value: "2",
  //   label: "任务",
  // },
  // {
  //   value: "3",
  //   label: "活动",
  // },
];

/**
 * 再次确认密码
 */
const checkPassword = (rule: any, value: any, callback: any) => {
  if (!value) {
    callback(new Error("请再次输入登录密码"));
  } else {
    if (ruleForm.password == ruleForm.checkPassword) {
      callback();
    } else {
      return callback(new Error("两者密码不一致"));
    }
  }
};

const rules = reactive<FormRules<RuleForm>>({
  nickName: [{ required: true, message: "请输入用户昵称", trigger: "blur" }],
  phoneNumber: [
    { required: true, validator: checkMobilePhone, trigger: "blur" },
    // { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
  ],
  messageCode: [
    { required: true, message: "请输入短信验证码", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入登录密码", trigger: "blur" },
    { min: 6, max: 20, message: "密码位数范围需在6-20内", trigger: "blur" },
  ],
  checkPassword: [
    { required: true, validator: checkPassword, trigger: "blur" },
  ],
  officialInstitutionName: [
    { required: true, message: "请输入官方机构名称", trigger: "blur" },
  ],
  landlinePhone: [
    { required: true, validator: checkLandlinePhone, trigger: "blur" },
  ],
});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
const radioChange = () => {
  radio.value = !radio.value;
};
/**
 * 从注册页跳转到登录页
 */
const loginPage = () => {
  emit("changeShowLogin");
};
/**
 * 跳转到用户注册
 */
const userPage = () => {
  emit("changeShowRegisterPage", "institution", shallowRef(userRegister));
};
/**
 * 跳转到专家注册
 */
const expertPage = () => {
  emit("changeShowRegisterPage", "expert", shallowRef(expertRegister));
};
</script>

<style lang="scss" scoped>
.inner {
  padding: 10% 25%;
  position: relative;
}
.redTriangle {
  width: 1rem;
  height: 1rem;
  position: absolute;
  right: 0;
  top: 0;
  background: linear-gradient(
    45deg,
    transparent,
    transparent 50%,
    rgb(236, 0, 0) 50%,
    rgb(236, 0, 0) 100%
  );
}
.whiteTriangle {
  width: 0.5rem;
  height: 0.5rem;
  position: absolute;
  right: 0;
  top: 0;
  background: linear-gradient(
    45deg,
    transparent,
    transparent 50%,
    white 50%,
    white 100%
  );
}
h1 {
  font-size: 0.16rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 0.1rem;
}
h2 {
  font-size: 0.16rem;
  font-weight: bold;
  text-align: right;
  padding-right: 0.13rem;
  line-height: 0.5rem;
  transform: rotate(45deg);
  color: #fff;
  cursor: pointer;
  position: relative;
  z-index: 100;
}
.checkBox {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.3rem;
  p {
    font-size: 0.07rem;
    cursor: pointer;
    color: #409eff;
    line-height: 0.269rem;
    span {
      color: rgb(236, 0, 0);
    }
  }
}
::v-deep(.el-form-item__content) {
  margin-bottom: 0.15rem;
}

::v-deep(.el-radio__inner) {
  border-radius: 2px !important;
}

::v-deep(.el-radio__input.is-checked .el-radio__inner::after) {
  content: "";
  width: 8px;
  height: 3px;
  border: 1px solid white;
  border-top: transparent;
  border-right: transparent;
  text-align: center;
  display: block;
  position: absolute;
  top: 3px;
  left: 2px;
  transform: rotate(-45deg);
  border-radius: 0px;
  background: none;
}
</style>
